<template>
  <div class="inventory">
    <Header />
    <div class="inventory-container">
      <div class="flex mt-14 tools-item">
        <span>Listing Tools:</span>
        <ul class="tools">
          <li>All Inventory</li>
          <li>Search Suppressed and Inactive Listings ({{ tableData.length }})</li>
          <li>Listing Quality Dashboard</li>
          <li>Potential Duplicates</li>
          <li>Manage Pricing</li>
          <li>Brand Health (0)</li>
        </ul>
      </div>
      <div class="flex tools-item">
        <span>FBA Inventory Tools:</span>
        <ul class="tools">
          <li>FBA Dashboard</li>
          <li>FBA inventory</li>
          <li>Remove Unfulfillable Inventory ({{getRandomVal(10, 20)}})</li>
          <li>Shipments</li>
          <li>FBA Opportunities</li>
          <li>FBA Analytics</li>
          <!-- <li>BA opportunities</li>
          <li>Manage Inventory Health</li>
          <li>Shipping Queue</li> -->
        </ul>
      </div>
      <div class="flex flex-between inventory-top">
        <div class="inventory-title">
          <p>Manage Inventory</p>
          <div class="flex" style="padding-top: 8px;">
            <span style="padding-right: 10px">Learn more</span>
            <span style="padding-left: 10px; border-left: 1px solid #ddd;">Take the tour</span>
          </div>
        </div>
        <div class="flex top-right">
          <ul class="flex top-option">
            <li>Add a Variation</li>
            <li>Add a product</li>
            <li>Preferences: 10 columns hidden</li>
          </ul>
          <span>NEW</span>
        </div>
      </div>

      <div class="flex search-box">
        <div class="select-box-default search-sel">
          <p>Action on 0 selected</p>
          <i></i>
        </div>
        <div class="flex search-input">
          <i></i>
          <input placeholder="Search SKU, Title, ISBN, ASIN" />
        </div>
        <div class="search-btn">Search</div>
        <div class="product">{{ tableData.length }} product(s)</div>
      </div>
      <div class="flex filter-box">
        <span class="box-name">Filters:</span>
        <div class="filter-item">
          <span class="item-name">Listing Status:</span>
          <a-radio-group v-model="formData.status">
            <a-radio value="1">All</a-radio>
            <a-radio value="2">Active</a-radio>
            <a-radio value="3">Inactive</a-radio>
            <a-radio value="4">Incomplete</a-radio>
            <a-radio value="5">Listing Removed</a-radio>
            <a-radio value="6">Search suppressed</a-radio>
          </a-radio-group>
        </div>
        <div class="filter-item">
          <span class="item-name">Fulfillment Type:</span>
          <a-radio-group v-model="formData.type">
            <a-radio value="1">All</a-radio>
            <a-radio value="2">Amazon</a-radio>
            <a-radio value="3">Merchant</a-radio>
          </a-radio-group>
        </div>
        <div class="select-box-default filter-sel">
          <p>Additional filters</p>
          <i></i>
        </div>
      </div>
      <div class="table-box">
        <table class="inventory-table">
          <tbody>
            <tr>
              <th style="padding: 10px 0; min-width: 3px;">
                <div> </div>
              </th>
              <th class="table-header-cell table-center" style="padding: 10px 2px;">
                <input type="checkbox" checked="checked" />
              </th>
              <th>
                <div></div>
              </th>
              <th class="table-header-cell">
                <p class="c-qing">Status</p>
              </th>
              <th class="table-header-cell table-center">
                <p>Image</p>
              </th>
              <th class="table-header-cell">
                <p class="c-qing">SKU</p>
                <p class="header-detail">Condition</p>
              </th>
              <th class="table-header-cell">
                <p class="c-qing">Product Name</p>
                <p class="header-detail">ASIN</p>
              </th>
              <th class="table-header-cell" style="border-top: 1px solid #e47911;">
                <p class="c-origin flex">
                  Date Created
                  <span class="date-icon"></span>
                </p>
                <p class="header-detail">Status Changed Date</p>
              </th>
              <th class="table-header-cell table-right">
                <p class="c-qing">Available</p>
              </th>
              <th class="table-header-cell table-right">
                <p class="c-qing">Inbound</p>
              </th>
              <th class="table-header-cell table-right">
                <p class="c-qing">Unfulfillable</p>
              </th>
              <th class="table-header-cell table-right">
                <p class="c-qing">Reserved</p>
              </th>
              <th class="table-header-cell table-right">
                <p>Estimated fee per unit sold</p>
              </th>
              <th class="table-header-cell">
                <p class="c-qing">Price and shipping cost</p>
                <div class="flex">
                  <p class="header-detail">Pricing status</p>
                  <i class="tip-icon"></i>
                </div>
              </th>
              <th class="table-header-cell table-right">
                <p>Business Price</p>
                <p class="header-detail">+ Shipping</p>
              </th>
              <th class="table-header-cell table-right">
                <p>Sales Rank</p>
              </th>
              <th class="table-header-cell table-center">
                <p>FNSKU</p>
              </th>
              <th class="table-header-cell table-center" style="white-space: nowrap;">
                <p class="c-qing">Fulfilled By</p>
              </th>
              <th class="table-header-cell">
                <div class="table-operation">Save all</div>
              </th>
            </tr>
            <tr v-if="!tableData || (tableData.length < 1)">
              <td colspan="13">
                <div class="message-text">You currently have no listings that meet this criteria. Use the filters below the search bar to view more of your listings.</div>
              </td>
            </tr>
            <template v-else>
              <tr v-for="(item, i) in tableData" :key="i + 'tableitem'" class="table-data">
                <td>
                  <div> </div>
                </td>
                <td>
                  <input type="checkbox">
                </td>
                <td><div></div></td>
                <td><p class="td-font-1">{{ item.status }}</p></td>
                <td><img :src="item.Image" style="width: 70px;"></td>
                <td>
                  <p class="td-font-1">{{ item.sku.split('\n')[0] }}</p>
                  <p class="td-font-3">{{ item.sku.split('\n')[1] }}</p>
                </td>
                <td style="max-width: 308px;">
                  <p class="td-font-1">{{ item.product_name.split('\n')[0] }}</p>
                  <p class="td-font-3">{{ item.product_name.split('\n')[1] }}</p>
                </td>
                <td style="white-space: nowrap;">
                  <p>{{ item.date_created && item.date_created.split('\n')[0] }}</p>
                  <p class="td-font-3">{{ item.date_created && item.date_created.split('\n')[1] }}</p>
                </td>
                <td class="table-right"><p>{{ item.available }}</p></td>
                <td class="table-right"><p>{{ item.inbound }}</p></td>
                <td class="table-right"><p>{{ item.unfulfillable }}</p></td>
                <td class="table-right"><p>{{ item.reserved }}</p></td>
                <td class="table-right">
                  <div class="td-view-more">
                    <p class="td-font-1 flex-1">{{ item.estimated_fee_per_unit_sold }}</p>
                    <i style="align-self: flex-end; margin-bottom: 4px;"></i>
                  </div>
                </td>
                <td>
                  <div class="td-box" style="min-width: 230px; max-width: 315px;">
                    <div class="input-box">
                      <i>$</i>
                      <input :value="item.price_and_shipping_cost" />
                      <span> + --</span>
                    </div>
                    <p class="td-font-3">Featured Offer: --</p>
                    <p class="td-font-1">Lowest price: --</p>
                    <div class="td-view-more">
                      <p class="td-font-1">View more</p>
                      <i></i>
                    </div>
                  </div>
                </td>
                <td class="table-right">
                  <div class="td-box">
                    <div class="input-box" style="width: 113px;">
                      <i style="margin-top: -15px;">$</i>
                      <input :value="tableData.business_price" />
                      <p> + --</p>
                    </div>
                    <div class="td-view-more" style="justify-content: right;">
                      <p class="td-font-1 flex-1">Add quantity discounts</p>
                      <i></i>
                    </div>
                  </div>
                </td>
                <td class="table-right">
                  <p>-</p>
                  <p>-</p>
                </td>
                <td class="table-center"><p>{{ item.FNSKU }}</p></td>
                <td class="table-center"><p>Amazon</p></td>
                <td>
                  <div class="flex edit-btn">
                    <div class="btn-info">Edit</div>
                    <span><i></i></span>
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
        <div class="flex flex-between table-page-box">
          <div class="flex table-page-left">
            Page
            <input value="1" />
            of 1
            <span>Go</span>
          </div>
          <div class="select-box-default table-page">
            <p>250 results per page</p>
            <i></i>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { getProducts } from '@/api'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      formData: {
        status: '1',
        type: '1'
      },
      tableData: []
    }
  },
  created () {
    getProducts().then(res => {
      this.tableData = res.products
    })
  },
  methods: {
    /**
     * 获取区间随机数
    */
    getRandomVal (min, max) {
      return parseInt(Math.random() * (max - min + 1) + min, 10)
    }
  }
}
</script>

<style lang="less" scoped>
.inventory-container {
  padding: 0 18px;
}
.select-box-default {
  height: 31px;
  padding-left: 11px;
  display: flex;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  cursor: default;
  border: 1px solid;
  border-radius: 8px;
  i {
    width: 10px;
    height: 8px;
    margin: 0 8px;
    background: url('../../assets/images/amz_icons2.png') no-repeat -7px -102px;
  }
}
.inventory {
  .tools-item {
    margin-bottom: 16px;
    span {
      font-size: 18px;
      font-weight: 600;
      line-height: 24px;
    }
    .tools {
      margin-left: -10px;
      display: flex;
      align-items: center;
      li {
        padding: 0 20px;
        color: #007185;
        border-right: 1px solid #ddd;
        cursor: pointer;
        &:last-of-type {
          border-right: 0;
        }
      }
    }
  }
  .inventory-top {
    .inventory-title {
      display: flex;
      p {
        padding-right: 6px;
        font-size: 28px;
        line-height: 36px;
      }
      span {
        line-height: 14px;
        color: #007185;
        cursor: pointer;
      }
    }
    .top-right {
      .top-option {
        li {
          line-height: 29px;
          padding: 0 10px;
          margin-right: 10px;
          font-size: 13px;
          border-radius: 8px;
          box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
          border: 1px solid #D5D9D9;
          cursor: pointer;
        }
      }
      span {
        font-size: 12px;
        color: #c60;
      }
    }
  }

  .search-box {
    margin: 20px 0 15px;
    .search-sel {
      color: #6F7373;
      background-color: #F7FAFA;
      border-color: #F0F2F2;
      i {
        opacity: .4;
      }
    }
    .search-input {
      padding: 3px 17px 3px 0;
      margin: 0 3px 0 20px;
      font-size: 12px;
      border-radius: 3px;
      border: 1px solid #888C8C;
      box-shadow: 0 1px 2px rgba(15, 17, 17, .15) inset;
      i {
        width: 13px;
        height: 13px;
        margin: 0 8px;
        background: url('../../assets/images/amz_icons2.png') no-repeat -271px -86px;
      }
      input {
        width: 146px;
        height: 23px;
        border: 0;
        outline: 0;
      }
    }
    .search-btn {
      padding: 0 11px;
      line-height: 29px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      border-radius: 20px;
      border: 1px solid #0F1111;
      background-color: #303333;
      box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
    }
    .product {
      margin-left: 22px;
      font-size: 12px;
    }
  }
  .filter-box {
    padding: 11px 15px;
    margin-bottom: 5px;
    font-size: 12px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background-color: #f3f3f3;
    .box-name {
      padding-right: 15px;
      color: #898989;
    }
    .filter-item {
      padding-left: 15px;
      padding-right: 20px;
      border-right: 1px solid #ddd;
    }
    /deep/.ant-radio-wrapper {
      margin-right: 0;
      span {
        padding: 0 3px;
        font-size: 12px;
        color: #0F1111;
      }
      .ant-radio-checked .ant-radio-inner {
        border-color: #007185;
        border-width: 5px;
      }
      .ant-radio-inner {
        &::after {
          display: none;
          background-color: #fff;
        }
      }
    }
    .filter-sel {
      border-color: #D5D9D9;
      background-color: #F0F2F2;
      box-shadow: 0 2px 5px rgba(15, 17, 17, .15);
    }
  }

  .pr-12 {
    padding-right: 12px;
  }
  .mt-14 {
    margin-top: 14px;
  }

  .table-box {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 5px;
  }

  .inventory-table {
    width: 100%;
    border: 1px solid #e7e7e7;
    border-top-color: #eaeaea;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.2;
    th {
      height: 62px;
      padding: 10px 5px;
      vertical-align: top;
      border-color: #e7e7e7;
      border-bottom: 1px solid #ddd;
      background: linear-gradient(to bottom, #f8f8f8, #eee);
      p {
        font-weight: 600;
      }
      .header-detail {
        font-weight: normal;
        color: #666;
      }
      .tip-icon {
        width: 30px;
        height: 27px;
        margin-left: -4px;
        transform: scale(.5);
        background: url(../../assets/images/amz_icons2.png) no-repeat -350px -36px;
      }
      .table-operation {
        width: 120px;
        height: 25px;
        line-height: 23px;
        text-align: center;
        color: #6F7373;
        background-color: #FFFAE0;
        border-radius: 7px;
        border: 1px solid #FFED94;
        box-shadow: 0 2px 5px 0 rgb(213, 217, 217, .5);
        cursor: default;
      }
    }
    td {
      height: 54px;
      padding: 4px 5px;
      vertical-align: top;
      border-color: #e7e7e7;
      border-bottom: 1px solid #eaeaea;
    }
    .td-font-1 {
      font-size: 12px;
      color: #007185;
      line-height: 14px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .td-font-3 {
      color: #666;
      line-height: 14px;
    }
    .td-view-more {
      margin-top: 12px;
      display: flex;
      align-items: center;
      i {
        width: 7px;
        height: 5px;
        margin-left: 6px;
        background: url(../../assets/images/amz_icons2.png) no-repeat -90px -5px;
        opacity: .6;
      }
    }
    .td-box {
      .input-box {
        position: relative;
        input {
          width: 113px;
          height: 25px;
          padding: 3px 7px 3px 21px;
          border-radius: 3px;
          text-align: right;
          border: 1px solid #888C8C;
          outline: 0;
        }
        i {
          position: absolute;
          top: 50%;
          left: 10px;
          width: 13px;
          height: 13px;
          margin-top: -8px;
          opacity: .35;
        }
      }
    }
    .edit-btn {
      width: 120px;
      height: 25px;
      border-radius: 7px;
      border: 1px solid #888C8C;
      box-shadow: 0 2px 5px rgba(15, 17, 17, .15);
      .btn-info {
        flex: 1;
        padding-left: 11px;
        padding-right: 10px;
        line-height: 23px;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 6px;
        border-left: 1px solid #888C8C;
        i {
          width: 10px;
          height: 8px;
          background: url(../../assets/images/amz_icons2.png) no-repeat -7px -102px;
        }
      }
    }
    .table-center {
      text-align: center;
    }
    .table-right {
      text-align: right;
    }
    .c-qing {
      padding-right: 12px;
      color: #007185;
    }
    .c-origin {
      padding-right: 12px;
      color: #e47911;
    }
    .message-text {
      text-align: center;
    }
    .date-icon {
      width: 12px;
      height: 8px;
      margin-left: 4px;
      background: url(../../assets/images/amz_icons3.png) no-repeat -77px 0;
    }
  }
  .table-page-box {
    width: 100%;
    position: absolute;
    bottom: -18px;
  }
  .table-page-left {
    input {
      width: 77px;
      height: 31px;
      padding: 3px 7px;
      margin: 0 4px;
      border-radius: 3px;
      border: 1px solid #888C8C;
      outline: 0;
    }
    span {
      width: 40px;
      height: 31px;
      margin-left: 4px;
      text-align: center;
      line-height: 29px;
      border-radius: 8px;
      border: 1px solid #D5D9D9;
      box-shadow: 0 2px 5px 0 rgb(213, 217, 217, .5);
      background-color: #fff;
    }
  }
  .table-page {
    border-color: #D5D9D9;
    background-color: #F0F2F2;
    box-shadow: 0 2px 5px 0 rgb(213, 217, 217, .5);
  }
}
</style>
